<template>
    <a-row :gutter="16">
        <a-col :span="12">
            <organization v-model="localValue[0]" />
        </a-col>
        <a-col :span="12">
            <!-- <department v-model="localValue[1]" /> -->
        </a-col>
        <a-col :span="12">
            <!-- <position v-model="localValue[2]" /> -->
        </a-col>
    </a-row>
</template>

<script setup lang="ts">
import organization from './lists.vue'
import department from './department.vue'
import position from './position.vue'
import { ref, watch } from 'vue'

const props = defineProps<{
    modelValue?: (string | number)[]
}>()

const emit = defineEmits(['update:modelValue'])

// 创建本地响应式数组
const localValue = ref<(string | number)[]>(['', '', ''])

// 监听 props 变化
watch(() => props.modelValue, (newVal) => {
    if (newVal && Array.isArray(newVal)) {
        localValue.value = [...newVal]
    }
}, { immediate: true })

// 监听本地值变化
watch(localValue, (newVal) => {
    emit('update:modelValue', newVal)
}, { deep: true })
</script>
